<template>
  <!-- 商品展示 -->
  <van-swipe-cell v-for="bo in Goods" :key="bo.goodsId">
    <van-card   :key="bo.orderNumber" :num="bo.amount" :price="bo.orderPrice" :desc="bo.details" 
          :title="bo.goodsName" :thumb="getImageUrl(bo.picture)"
          @click-thumb="toGoodsList(bo.goodsId)" >
      <router-link :to="{ name: 'goods' }"></router-link>
      <template #tags>
        <van-tag plain type="danger">{{bo.orderState}}</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" to="message">联系卖家</van-button>
        <van-button size="mini" to="tocomment">查看评论</van-button>
        <van-button size="mini" @click="showTop = true">查看物流</van-button>

      </template>
    </van-card>
    <!-- 滑动删除 -->
    <template #right>
      <van-button square text="删除" type="danger" class="delete-button" @click="toDelete(bo.goodsId)"/>
    </template>
  </van-swipe-cell>
  <div>
    <nut-popup  closeable :style="{ height: '50%', width: '80%' }" teleport-disable
      v-model:visible="showTop" bottom title="查看物流">
      <nut-steps direction="vertical" progress-dot current="5">
        <nut-step title="11-2  12:12" content="您的订单已经打包完成，商品已发出">1</nut-step>
        <nut-step title="11-4  15:12" content="已发往【福州市】">2</nut-step>
        <nut-step title="11-6  5:45" content="【福州市】到达福州仓山集散中心">3</nut-step>
        <nut-step title="11-7 12:12" content="已发往【银川市】">4</nut-step>
        <nut-step title="11-8  18:12" content="【银川市】到达银川市西夏区集散中心">5</nut-step>
        <nut-step title="11-9  19:05" content="快递员张伟正在为您派件">6</nut-step>
        <nut-step title="">7
          <!-- <template #content>
            <p>收货地址为：</p>
            <p>银川市宁夏大学18号</p>
          </template> -->
        </nut-step>
      </nut-steps>
    </nut-popup>

  </div>
</template>
    
<script setup>
import { onMounted } from 'vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router'; //路由器
import { default as http, getImageUrl } from '@/utils/request.js';
import { ref } from 'vue';
import { Dialog } from '@vant/compat';
// 返回上一页面
const onClickLeft = () => history.back();
const router = useRouter(); //获取到 router 对象，用于编程式跳转导航
const activeName = ref('selled');
//商品 详情页
const toGoodsList=function(goodsId){
  console.log("商品ID:",goodsId);
  router.push({ name: 'goods', params: { goodsId: goodsId } });
}

// 从后端获取商品列表


const Goods = reactive([
])
// 获取待发货列表  
const getGoods = () => {

  http.get("/user/info").then((response) => {
    console.log("获取个人信息= ", response);
    console.log("userName:", response.data.data.userName);
    http.get("/user/buy" , {
      params: {
        pageSize: 6,
        pageNum: 1,
        status: 1
      }
    }
      ).then((res) => {
      Goods.splice(0); //todo 需要将原有的元素清空  
      // afterSendList = afterSendList.filter(res.data.data.list.orderNumber); 
      res.data.data.list.forEach(order => {
        Goods.push(order);
      });
      console.log('获取卖出商品列表: ', res.data.data.list);
      console.log('Goods:', Goods);
      // resolve(); // 当获取待收货列表成功后，返回一个解析成功的Promise  
    }).catch(err => {
      reject(err); // 当请求失败时，返回一个请求失败的Promise  
    });


  //   const getOrderList = (status) => {
  // http.get("/user/order", {
  //   params: {orderState: status}
  // }).then((res) => {
  //     beforePayList.splice(0); 
  //     res.data.data.list.forEach(order => {
  //       beforePayList.push(order);
  //     });
  //     console.log('获取待付款列表: ', res.data.data.list);
  //     console.log('beforePayList:', beforePayList);
  //     // resolve(); // 当获取待收货列表成功后，返回一个解析成功的Promise  
  //   }).catch(err => {
  //     reject(err); // 当请求失败时，返回一个请求失败的Promise  
  //   });












  }).catch(() => {
  });
};
// 删除商品信息
const toDelete = (goodsId) => {
  console.log("------------删除方法");
  // 二次确认删除
  Dialog({ title: '提示', message: '确认删除吗？' }).then(() => {//用户点击确定按钮
      http.delete("/user/goods/delete/"+goodsId)
        .then((res) => {
          console.log('删除返回值：', res);
          if (res.data.code === 200) {	//修改成功
           console.log("删除成功");
            getGoods;
          }
        }).catch((err) => {
          console.log('取消失败：', err);
          
        });
    })
    .catch(() => {//点击取消按钮

    });
};

   
    
//显示弹出层
const showTop = ref(false);
onMounted(() => {
  // 获取消息列表
  getGoods();

});
</script>
    
<style scoped lang="css">
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}

a:visited {
  color: rgb(24, 23, 23);
  /*已访问的链接颜色*/
}

a:active {
  color: white;
  /*鼠标点击时的颜色*/
}

.header {
  padding: 1rem 1rem 0.69rem;
  height: 5.94rem;
}


.text {
  color: #bababa;
  line-height: 0.66rem;
}



.text_2 {
  margin-right: 1rem;
  color: #0f0d0d;
  line-height: 0.94rem;
}



.font_1 {
  font-size: 0.88rem;
  font-family: Poppins;
  line-height: 0.78rem;
  font-weight: 600;
  color: #e81818;
}


.section {
  padding: 0.25rem 1.63rem;
  background-color: #f7ee95;
}

.space-x-52-reverse>*:not(:last-child) {
  margin-right: 3.25rem;
}

.font_2 {
  font-size: 0.75rem;
  font-family: Poppins;
  line-height: 0.78rem;
  font-weight: 600;
}

.text_3 {
  color: #101010;
  font-size: 0.8rem;
  line-height: normal;
  font-weight: 600;
}
</style>